<!-- src/views/HistorySearchView.vue -->
<script setup>
import {ref} from 'vue'
import {ElMessage} from 'element-plus'

const selectedUserId = ref(2)
const keyword = ref('')
const searchResults = ref([])

const doSearch = async () => {
  if (!keyword.value.trim()) {
    ElMessage.warning('请输入关键词')
    return
  }
  try {
    const res = await searchChatContent(selectedUserId.value, keyword.value)
    searchResults.value = res.data
  } catch (err) {
    ElMessage.error('搜索失败')
  }
}
</script>

<template>
  <div class="history-page">
    <h2>🔍 历史聊天搜索</h2>
    <el-input
        v-model="keyword"
        placeholder="输入关键词搜索聊天内容"
        style="max-width: 400px"
        @keyup.enter="doSearch"
    >
      <template #append>
        <el-button type="primary" @click="doSearch">搜索</el-button>
      </template>
    </el-input>

    <div class="results">
      <div
          v-for="(msg, index) in searchResults"
          :key="index"
          class="message-item"
      >
        <strong>{{ msg.senderId === 1 ? '你' : '对方' }}:</strong>
        {{ msg.content }}
      </div>
      <p v-if="searchResults.length === 0" class="no-result">
        暂无搜索结果
      </p>
    </div>
  </div>
</template>

<style scoped>
.history-page {
  padding: 20px;
  max-width: 800px;
  margin: 0 auto;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.results {
  margin-top: 20px;
}

.message-item {
  padding: 10px;
  border-bottom: 1px dashed #ccc;
}

.no-result {
  color: #999;
  text-align: center;
  margin-top: 20px;
  font-style: italic;
}
</style>